<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="/template.xhtml">
	<ui:define name="head">
		<link href="#{facesContext.externalContext.requestContextPath}/css/rf/datascroller.css" rel="stylesheet" type="text/css" />
		<link href="#{facesContext.externalContext.requestContextPath}/css/rf/datatable.css" rel="stylesheet" type="text/css" />
		
		<h:outputStylesheet>
			.trhover {
				cursor: pointer;
			}
		</h:outputStylesheet>
	</ui:define>
 
	<ui:define name="content">
		<div id="head" align="center">
			<h:outputText value="#{label.manageCustomFields}" style="font-size: 30px;" />
			<hr></hr>
		</div>
		<h:form>
			<div>
				<h:commandButton action="#{customFieldsAction.actionCreateCustomField()}" value="Create New Custom Field" />
			</div>
			<a4j:jsFunction name="previewCf" action="#{customFieldsSearchAction.previewSearchResult()}">
				<a4j:param name="id" assignTo="#{customFieldsSearchAction.selectedId}" /> 
			</a4j:jsFunction>
			<rich:dataTable id="cfTable" rowClass="trhover" value="#{customFieldsSearchAction.dataModel}" var="cf" onrowclick="previewCf(#{cf.id})">
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Type" /> <br />
						<h:commandButton value="Select CF Types">
					        <rich:componentControl target="selectCfTypePopup" operation="show" />
					    </h:commandButton>
					</f:facet>
					<h:outputText value="#{cf.fieldType.label}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Identifier" /> <br />
						<h:inputText value="#{customFieldDto.identifier}" />
					</f:facet>
					<h:outputText value="#{cf.fieldKey}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Display Name" /> <br />
						<h:inputText value="#{customFieldDto.displayName}" />
					</f:facet>
					<h:outputText value="#{cf.displayName}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Required State" /> <br />
						<h:selectOneMenu value="#{customFieldDto.required}" converter="booleanSelectionConverter">
							<f:selectItems value="#{customFieldsSearchAction.requiredValues}" /> 
						</h:selectOneMenu> 
					</f:facet>
					<h:outputText value="#{cf.required eq true ? 'Yes' : 'No'}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:commandButton action="#{customFieldsSearchAction.actionSearch(customFieldDto)}" value="Search" />
					</f:facet>
				</rich:column>
				
				<f:facet name="footer">
	                <rich:dataScroller id="cfTableScroller" />
	            </f:facet>
			</rich:dataTable>
			
			<!-- Popups -->
			<rich:popupPanel id="selectCfTypePopup" modal="true" resizeable="true">
		        <f:facet name="header">
		            <h:outputText value="Select Custom Filed Types" />
		        </f:facet>
		        <f:facet name="controls">
		            <h:outputLink value="#" onclick="#{rich:component('selectCfTypePopup')}.hide(); return false;">
		                Close
		            </h:outputLink>
		        </f:facet>
		        <h:selectManyCheckbox value="#{customFieldDto.types}" 
			        layout="pageDirection" converter="#{selectItemsBean.customFieldsTypeConverter}">
		        	<f:selectItems value="#{selectItemsBean.customFieldTypesAsSelectItems}" />
		        </h:selectManyCheckbox>
		    </rich:popupPanel>
		</h:form>
		
	</ui:define>
</ui:composition>
</html>
